<template>
  <div class="center-top-wrap">
    <e-boxline :chartData="eBoxlineChartData" />
    <Spin fix v-show="centerTopChartLoading">加载中...</Spin>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import { each, merge } from 'lodash'
import { eBoxlineOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('leakMonitoring')

export default {
  name: 'LeakMonitoringCenterTop',
  components: {
    EBoxline: () => import('@/commons/charts/EBoxline')
  },
  computed: {
    ...mapState(['centerTopChartLoading', 'eBoxlineData']),
    id() {
      return nanoid
    },
    eBoxlineChartData() {
      if (!this.eBoxlineData) return null
      const { list = [] } = this.eBoxlineData
      const _seriesDaata = []
      const _axisData = []
      each(list, item => {
        const [_a, _b, _c, _d, _f, _g] = item
        _axisData.push(_a)
        _seriesDaata.push({
          name: _a,
          value: [_b, _c, _d, _f, _g]
        })
      })
      return merge({}, eBoxlineOptions, {
        xAxis: {
          data: _axisData
        },
        series: [
          {
            data: _seriesDaata
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions([])
  }
}
</script>
<style lang="less" scoped>
.center-top-wrap {
  width: 100%;
  height: 100%;
}
</style>
